<template>
  <div class="wrap">
    <CHeader content="高危作业综合分析" />
    <!-- <div class="pageTitle"><span>高危作业综合分析</span></div> -->
    <div class="box">
      <el-radio-group v-model="filter.address">
        <el-radio-button
          v-for="(item, index) in regionArray"
          :key="index"
          :label="item.label"
        >{{ item.name }}</el-radio-button>
      </el-radio-group>
    </div>
    <div class="total">
      <div class="processing item">
        <img :src="totalImg" />
        <div class="text">
          <div class="title">辖区内今日特殊作业<span>进行中</span></div>
          <div class="num">{{total.processing}}</div>
        </div>
      </div>
      <div class="completed item">
        <img :src="totalImg" />
        <div class="text">
          <div class="title">辖区内今日特殊作业<span>已完成</span></div>
          <div class="num">{{total.completed}}</div>
        </div>
      </div>
      <div class="history item">
        <img :src="historyTotalImg" />
        <div class="text">
          <div class="title">历史总数</div>
          <div class="num">{{total.historyTotal}}</div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div
        class="item"
        :key="index"
        v-for="(item,index) in tabs"
      >
        <div class="num">{{item.num}}</div>
        <div class="name">{{item.name}}</div>
        <img :src="item.src" />
      </div>
    </div>
    <TableBox
      class="tableBox"
      :mainMaxHeight="480"
      :data="tableData"
      :pageOption.sync="pageOption"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
      <!-- 企业名称 申请部门 申请时间 作业证种类 作业证编码 作业状态 操作 备注 -->
      <el-table-column
        label="企业名称"
        prop="companyName"
        align="center"
      />
      <el-table-column
        label="申请部门"
        prop="department"
        align="center"
        width="260"
      />
      <el-table-column
        label="申请时间"
        prop="applyTime"
        align="center"
        width="160"
      />
      <el-table-column
        label="作业证种类"
        prop="workType"
        align="center"
        width="260"
      />
      <el-table-column
        label="作业证编码"
        prop="workCode"
        align="center"
        width="260"
      />
      <el-table-column
        label="作业状态"
        prop="status"
        align="center"
        width="120"
      >
        <template slot-scope="scope">
          <div
            class="status"
            :class="'status'+scope.row.status"
          >{{status == 0 ? "未开始" : (status == 1 ? "进行中" : "已完成")}}</div>
        </template>
      </el-table-column>

      <el-table-column
        label="负责人"
        prop="fzr"
        align="center"
        width="120"
      />

      <el-table-column
        label="操作"
        align="center"
        width="120"
      >
      <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row)"
          >查看</el-button>
        </template>
      </el-table-column>

    </TableBox>
  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import TableBox from "@/components/tableBox/tableBox.vue";
import { requestPost ,requestGet } from "@/network/request";
export default {
  name: "tszygltj",
  components: {
    CHeader,
    TableBox
  },
  data () {
    return {
      totalImg: require("@/assets/images/tszygl/total.png"),
      historyTotalImg: require("@/assets/images/tszygl/historyTotal.png"),
      total: {
        processing: 0,
        completed: 0,
        historyTotal: 0
      },
      // 动火作业 高处作业 吊装作业 临时用电 受限空间 盲板作业 动土作业 断路作业
      tabs: [
        {
          num: 0,
          name: '动火作业',
          src: require("@/assets/images/tszygl/1.png")
        },
        {
          num: 0,
          name: '高处作业',
          src: require("@/assets/images/tszygl/2.png")
        },
        {
          num: 0,
          name: '吊装作业',
          src: require("@/assets/images/tszygl/3.png")
        },
        {
          num: 0,
          name: '临时用电',
          src: require("@/assets/images/tszygl/4.png")
        },
        {
          num: 0,
          name: '受限空间',
          src: require("@/assets/images/tszygl/5.png")
        },
        {
          num: 0,
          name: '盲板作业',
          src: require("@/assets/images/tszygl/6.png")
        },
        {
          num: 0,
          name: '动土作业',
          src: require("@/assets/images/tszygl/7.png")
        },
        {
          num: 0,
          name: '断路作业',
          src: require("@/assets/images/tszygl/8.png")
        },
      ],
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "" },
        { name: "盐化新区", label: "yhxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" }
      ],
      // 过滤器
      filter: {
        address: "",
      },
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "sizes, total, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
    }
  },
  methods:{
    initFilter() {
      Object.keys(this.filter).forEach((key) => {
        if (this.$route.query[key]) {
          this.filter[key] = this.$route.query[key];
        }
      });
    },
    initcs() {
      this.loading = true;
      setTimeout(() => {
        this.total = {
          processing: Math.floor(Math.random() * 1000),
          completed: Math.floor(Math.random() * 1000),
          historyTotal: Math.floor(Math.random() * 1000),
        };
        this.tabs.forEach(item=>{
          item.num = Math.floor(Math.random() * 1000);
        });

        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    init() {
      this.loading = true;
      //获取各类报警的数量
      requestGet("/manageArea/selectAreaName").then(res=>{
        if(res.code == 200 && res.data.length > 0){
            this.regionArray = res.data;
        }
      })
      setTimeout(() => {

        requestPost("/wwyt/tszygltj/tszytjCount",{qxdm:this.filter.address}).then(res=>{
          if(res.code == 200  && res.data.length > 0){
            this.total.processing = res.data[0].jxz;
            this.total.completed = res.data[0].ywc;
            this.total.historyTotal = res.data[0].lszs;
            this.tabs[0].num = res.data[0].dhzy;
            this.tabs[1].num = res.data[0].gczy;
            this.tabs[2].num = res.data[0].dzzy;
            this.tabs[3].num = res.data[0].lsyd;
            this.tabs[4].num = res.data[0].sxkj;
            this.tabs[5].num = res.data[0].mbzy;
            this.tabs[6].num = res.data[0].dtzy;
            this.tabs[7].num = res.data[0].dlzy;
          }
          else{
            this.total.processing = 0;
            this.total.completed = 0;
            this.tatal.historyTotal = 0;
            this.tabs[0].num = 0;
            this.tabs[1].num = 0;
            this.tabs[2].num = 0;
            this.tabs[3].num = 0;
            this.tabs[4].num = 0;
            this.tabs[5].num = 0;
            this.tabs[6].num = 0;
            this.tabs[7].num = 0;
          }
        })

        this.getTableData(true);
        this.loading = false;
      }, 1000);
    },
    getTableData(retry = false) {
      this.tableData = [];
      //获取报警记录
      requestPost("/wwyt/tszygltj/tszyglhz",{pageRequest:{pageNum:this.pageOption.currentPage
                                                                      ,pageSize:this.pageOption.pageSize}
                                                          ,selectMap:{qxdm:this.filter.address}
                                                          }).then(res=>{
        if(res.code == 200 ){
          this.tableData = res.data;
        }
      })
    },
    getTableDatacs(retry = false) {
      this.tableData = [];
      setTimeout(() => {
        let i = this.pageOption.currentPage == 1
            ? this.pageOption.currentPage
            : 1 + this.pageOption.pageSize * (this.pageOption.currentPage - 1);
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        let tempCount = this.pageOption.pageSize - this.tableData.length;
        for (let index = this.tableData.length; index < tempCount; index++) {
          // 企业名称 申请部门 申请时间 作业证种类 作业证编码 作业状态 操作 备注
          let status = i%3,item = {
            companyName: "公司名称" + i++,
            department: "申请部门" + i,
            applyTime: "2020-01-01 12:00:00",
            workType: "动火作业",
            workCode: "123456789",
            status: status,
            statusText: status == 0 ? "未开始" : (status == 1 ? "进行中" : "已完成"),
            fzr: "备注" + i,
          };
          this.tableData.push(item);
        }
      }, 1000);
    },
    sizeChange (val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    currentChange (val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
    handleClick(){
      this.$message.info('暂未开放')
    }
  },
  mounted() {
    Object.keys(this.$route.query).length > 0 && this.initFilter();
    this.init();
  },
  watch:{
    filter: {
      handler() {
        this.init();
      },
      deep: true,
    },
  }
}
</script>


<style lang="scss" scoped>
.wrap {
  width: 100%;
  min-height: 100%;
  text-align: left;
  background-color: rgb(243, 245, 251);
  font-family: Microsoft YaHei;
  .pageTitle {
    width: 100%;
    height: 64px;
    line-height: 64px;
    background: linear-gradient(90deg, #3d63c3 0%, #4c76cc 100%);
    text-align: center;
    span {
      font-size: 30px;
      font-weight: bold;
      color: #e4f1fb;
      text-shadow: 0px 4px 6px rgba(40, 80, 180, 0.3);
      background: linear-gradient(0deg, #d0e1f7 0%, #f4faff 98.92578125%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      user-select: none;
      background-clip: text;
    }
  }
  .box {
    user-select: none;
    padding: 20px 20px 0 20px;
    max-width: calc(100% - 40px);
    :deep .el-radio-button {
      &.is-active .el-radio-button__inner {
        background-color: #5184ea;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          border-top: 5px solid #5184ea;
          border-left: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right: 5px solid transparent;
        }
      }
    }
    &.noAfter {
      :deep .el-radio-button.is-active .el-radio-button__inner::after {
        display: none;
      }
    }
  }
  .total {
    padding: 0 20px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    .item {
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30%;
      min-width: 410px;
      height: 88px;
      box-shadow: 1px 0px 14px 0px rgba(116, 118, 138, 0.16);
      border-radius: 6px;
      flex: 4;
      img {
        margin: 0 6px;
      }
      .text {
        display: flex;
        align-items: center;
        color: #ffffff;
        .title {
          font-size: 16px;
          font-weight: 400;
          span {
            font-weight: 600;
            font-size: 18px;
            margin: 0 6px;
          }
        }
        .num {
          margin: 0 0 0 18px;
          font-size: 36px;
          font-weight: 600;
        }
      }
      &:nth-child(2) {
        margin: 0 24px;
      }
      &.history {
        max-width: 340px;
        min-width: 340px;
        background: linear-gradient(90deg, #ff8a69 0%, #ffc5a8 100%);
      }
      &.processing {
        background: linear-gradient(90deg, #519cff 0%, #a9d5fc 98%);
      }
      &.completed {
        background: linear-gradient(90deg, #4dcfb0 0%, #88e7d7 98%);
      }
    }
  }
  .tabs {
    padding: 0 10px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    .item {
      width: 184px;
      height: 238px;
      min-width: 184px;
      min-height: 238px;
      max-width: 184px;
      max-height: 238px;
      background: #ffffff;
      box-shadow: 1px 0px 14px 0px rgba(116, 118, 138, 0.16);
      border-radius: 6px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 20px 5px;
      .num{
          // margin: 0 0 0 18px;
          font-size: 36px;
          color: #55585a;
          font-weight: 600;
          margin-bottom: 15px;
      }
    }
  }
  .tableBox {
    margin: 20px 20px 0 20px;
    .status{
      display: flex;
      justify-content: center;
      align-items: center;
      &::before{
        content: '';
        width: 8px;
        height: 8px;
        background: #797979;
        border-radius: 50%;
        display: block;
        margin-right: 6px;
      }
      &0::before{
        background: #797979;
      }
      &1::before{
        background: #579FFF;
      }
      &2::before{
        background: #4dcfb0;
      }
    }
  }
}
@media screen and (max-width: 1600px) {
  .wrap {
    .tabs {
      justify-content: left;
    }
  }
}
</style>